<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>send transaction</title>
    <link rel=stylesheet href=../html/css/base.css>
    <link rel=stylesheet href=../html/css/ui-block.css>
    <script src=nebPay.js></script>     <!-- you should add nebPay.js to you Dapp page><!-->
</head>

<style>
</style>

<body>

<script>
    var NebPay = require("nebpay");
    var nebPay = new NebPay();

    //to check if the extension is installed
    //if the extension is installed, var "webExtensionWallet" will be injected in to web page
    setTimeout(function () {
        if(typeof(webExtensionWallet) === "undefined"){
            alert ("Extension wallet is not installed, please install it first.")
        }
    },100)

    //send transaction to another address
    function onClickSendTx() {
        var to = document.getElementById("inputReceiveAddress").value;
        var amount = document.getElementById("inputAmount").value;
        nebPay.pay(to, amount, {
            qrcode: {
                showQRCode: false
            },
            goods: {
                name: "test",
                desc: "test goods"
            },
            //callback: cbSendTx
            listener: cbSendTx
        });
    }
    //callback function of onClickSendTx, to handle the transaction response
    function cbSendTx(serialNumber, resp){
        console.log("callback resp: " + JSON.stringify(resp))
        document.getElementById("txResult").innerHTML = "send transaction result:\n" +  JSON.stringify(resp)
    }

    function onClickCallDapp() {
        var to = document.getElementById("inputContractAddress").value;
        var value = document.getElementById("inputAmount2").value;
        var callFunction = document.getElementById("inputFunction").value;
        var callArgs = "[\"" + document.getElementById("inputParameter").value.trim() + "\"]"; //in the form of ["args"]
        nebPay.call(to, value, callFunction, callArgs, {
            qrcode: {
                showQRCode: true
            },
            goods: {
                name: "test",
                desc: "test goods"
            },
            //callback: cbCallDapp
            listener: cbCallDapp
        });
    }

    function cbCallDapp(serialNumber, resp){
        console.log("callback resp: " + JSON.stringify(resp))
        document.getElementById("callResult").innerHTML = "call Dapp result:\n" +  JSON.stringify(resp)
    }

    function onClickSimulateCall() {
        var to = document.getElementById("inputContractAddress").value;
        var value = document.getElementById("inputAmount2").value;
        var callFunction = document.getElementById("inputFunction").value;
        var callArgs = "[\"" + document.getElementById("inputParameter").value.trim() + "\"]"; //in the form of ["args"]
        nebPay.simulateCall(to, value, callFunction, callArgs, {
            qrcode: {
                showQRCode: true
            },
            goods: {
                name: "test",
                desc: "test goods"
            },
            listener: cbSimulateCall
        });
    }

    function cbSimulateCall(serialNumber, resp){
        console.log("callback resp: " + JSON.stringify(resp))
        document.getElementById("simulateCallResult").innerHTML = "simulate call result:\n" +  JSON.stringify(resp)
    }

</script>

<h3 class="col">Test for ExtensionWallet</h3>
<p>using <a href="https://github.com/nebulasio/nebPay" target="_blank">NebPay</a> API to send transaction and call a smart contract</p>

<div >

<h3>1 Send transaction</h3>
<p>Input the receive account and amount of this transaction </p>
    <div>
        <label for="inputReceiveAddress">receive address: </label>
        <input id="inputReceiveAddress"  size="35" >
    </div>
    <div>
        <label for="inputAmount">amount in NAS: </label>
        <input id="inputAmount"  size="10" >
    </div>
    <div>
        <button type="button" id="buttonSendTx" class="btn btn-block" onclick="onClickSendTx()">send transaction</button>
    </div>
    <p id="txResult" style="color:#FF0000;font-size:12px;"></p>

<h3>2 Call a smart contract</h3>
<p>Input your smart contract address and parameters </p>
    <div>
        <label for="inputContractAddress">contract address: </label>
        <input id="inputContractAddress" size="35" >
    </div>
    <div>
        <label for="inputAmount2">amount in NAS: </label>
        <input id="inputAmount2"  size="10" >
    </div>
    <div>
        <label for="inputFunction">input function name:</label>
        <input id="inputFunction" style="resize:both" >
    </div>
    <div>
        <label for="inputParameter">input parameters:</label>
        <input id="inputParameter" style="resize:both" >
    </div>
    <div>
        <button type="button" id="buttonCallDapp" class="btn btn-block" onclick="onClickCallDapp()">call smart contract</button>
    </div>
    <p style="color:gray;font-size: 12px">The above button using "sendTransaction" rpc</p>
    <p id="callResult" style="color:#FF0000;font-size:12px;"></p>
    <div>
        <button type="button" id="buttonSimulateCall" class="btn btn-block" onclick="onClickSimulateCall()">call smart contract</button>
    </div>
    <p style="color:gray;font-size: 12px">The above button using "call" rpc</p>
</div>
<p id="simulateCallResult" style="color:#FF0000;font-size:12px;"></p>

</body>
</html>
